<template>
	<view class="login_content bg-gradual-blue">
		<view class="login_desc">
			<view class="pr">
				<view class="one"></view>
				<view class="two"></view>
			</view>
			<image class="logo" :src="logo" ></image>
			<text class="logo_title text-bold text-white">金财算</text>
			<button class="cu-btn round bg-white shadow login_btn text-blue text-ABC text-bold" 
			 @click="appLoginWx">微信授权登录</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				logo:''
			}
		},
		onReady() {
			this.logo=this.jcs_logo;
		},
		methods:{
			appLoginWx(){
				var that=this;
				uni.getProvider({
				  service: 'oauth',
				  success: function (oauthSuccess) {
					if (~oauthSuccess.provider.indexOf('weixin')) {
						uni.showLoading({
						    title: '登入中'
						});
						uni.login({
							provider: 'weixin',
							success: (loginSuccess) => {
								let code = loginSuccess.code;
								that.$H.post("/homeapi/appletsLogin",{code:code},{}).then(res=>{
									let userinfo = res.data.userinfo
									that.$u.vuex('jcs_token', userinfo.token)
									let user = {avatar: userinfo.avatar,phone: userinfo.mobile,email: userinfo.email}
									that.$u.vuex('jcs_user', user)
									setTimeout(function () {
									    uni.hideLoading();
										uni.showToast({
										    title: '登入成功',
										    duration: 1000
										});
									}, 1000);
									setTimeout(function () {
									    uni.switchTab({
									        url: '/pages/home/home'
									    });
									}, 1500);
								}).catch(err=>{
									setTimeout(function () {
									    uni.hideLoading();
										uni.showToast({
										    title: '登入失败，尝试重新登入',
											icon:'none',
										    duration: 2000
										});
									}, 1000);
								})
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
								    title: '登入失败，尝试重新登入',
									icon:'none',
								    duration: 2000
								});
							}
						})
					}else{
						uni.showToast({
							title: '请先安装微信或升级版本',
							icon:"none"
						});
					}
				  }
				});
			}
		}
	}
</script>

<style>
	.login_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-image: linear-gradient(45deg, #1cbbb4, #0081ff);
	}
	.logo{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.login_desc{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.login_btn{
		width: 60%;
		margin-top: 30rpx;
	}
	.logo_title{
		font-size: 23px;
		margin-top: 30rpx;
	}
	.pr{
		position: relative;
		right: 75rpx;
	}
	.one
	{
		position: absolute;
		width:150rpx;
		height:150rpx;
		border: 1px solid #3f51b5 ;
		border-radius:50%;
		animation:myOne 2s ease-out;
		animation-iteration-count: infinite;
	}
	.two{
		position: absolute;
		width:150rpx;
		height:150rpx;
		border: 1px solid #3f51b5  ;
		border-radius:50%;
		animation:myTwo 2s ease-out;
		animation-iteration-count: infinite;
	}

	@keyframes myOne
	{
		0%   {
			transform: scale(1);
			opacity: 1;
		}
		25%   {
			transform: scale(1.25);
			opacity: 0.5;
		}
		50%   {
			transform: scale(1.25);
			opacity: 0.25;
		}
		100%   {
			transform: scale(1.5);
			opacity: 0;
		}
	}
	@keyframes myTwo
	{
		0%   {
			transform: scale(1);
			opacity: 1;
		}
		25%   {
			transform: scale(1.25);
			opacity: 0.5;
		}
		50%   {
			transform: scale(1.5);
			opacity: 0.25;
		}
		100%   {
			transform: scale(2);
			opacity: 0;
		}
	}
</style>
